<template>
    <div>
        <flexbox>
            <span class="margin-r-16">统计方式：</span>
            <a-select v-model:value="tongjiType" style="width: 200px" class="margin-r-8" @change="handleSelectTongjiTypeChange">
                <a-select-option key="1">按月份统计</a-select-option>
                <a-select-option key="2">按季度统计</a-select-option>
                <a-select-option key="3">按年度统计</a-select-option>
                <a-select-option key="4">自定义时间段统计</a-select-option>
            </a-select>
            <h-range-picker-cell
                :value="[startTime ? $moment(startTime, 'YYYY-MM-DD') : null, endTime ? $moment(endTime, 'YYYY-MM-DD') : null]"
                class="margin-r-16"
                @change="rangeDateChange"
                v-if="tongjiType === '4'"
            />
            <h-year-picker-cell :allowClear="false" v-model:value="selectYear" class="margin-r-16" @change="handleSelectYearChange" v-else />

            <a-select
                v-model:value="selectMonthOrQuarter"
                style="width: 100px"
                class="margin-r-16"
                v-if="['1', '2'].includes(tongjiType)"
                @change="handleTimeChange"
            >
                <a-select-option v-for="item of timeOptions" :key="item.name" :value="item.value">
                    {{ item.name }}
                </a-select-option>
            </a-select>

            <span class="margin-r-16">颗粒度：</span>
            <a-select v-model:value="granularity" style="width: 200px" class="margin-r-16" @change="handleKeliChange">
                <a-select-option v-for="item of keliduOptions" :key="item.name" :value="item.value">
                    {{ item.name }}
                </a-select-option>
            </a-select>

            <a-button type="primary" class="margin-l-8" @click="handleChangeSearchQuery">查询</a-button>
        </flexbox>
    </div>
</template>

<script lang="ts">
import moment from 'moment';
import { HYearPickerCell, HRangePickerCell } from '@/components';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        HYearPickerCell,
        HRangePickerCell
    },
    emits: ['change'],
    setup(_, { emit }) {
        const state = reactive<any>({
            tongjiType: '1',
            selectYear: moment().year().toString(),
            selectMonthOrQuarter: 1,
            granularity: '1', //颗粒度
            deliveryMode: null,
            isRequireAnalyse: '否',
            startTime: '',
            endTime: ''
        });
        const keliduOptions = computed(() => {
            if (state.tongjiType === '1') {
                return [
                    { name: '周', value: '1' },
                    { name: '预发布版本', value: '3' }
                ];
            } else if (state.tongjiType === '3') {
                return [
                    { name: '月份', value: '2' },
                    { name: '季度', value: '4' },
                    { name: '预发布版本统计', value: '3' }
                ];
            } else {
                return [
                    { name: '月份', value: '2' },
                    { name: '预发布版本', value: '3' }
                ];
            }
        });
        const timeOptions = computed(() => {
            if (state.tongjiType === '1') {
                return new Array(12).fill(' ').map((item, index) => ({ name: `${index + 1}月份`, value: index + 1 }));
            } else if (state.tongjiType === '2') {
                return new Array(4).fill(' ').map((item, index) => ({ name: `${index + 1}季度`, value: index + 1 }));
            } else {
                return [];
            }
        });
        const handleSelectTongjiTypeChange = () => {
            state.selectMonthOrQuarter = 1;
            if (state.tongjiType === '1') {
                state.granularity = '1';
            } else {
                state.granularity = '2';
            }
            getRangeDate();
        };
        const handleTimeChange = (val) => {
            state.selectMonthOrQuarter = val;
            getRangeDate();
        };
        const handleSelectYearChange = () => {
            getRangeDate();
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            state.startTime = startTime;
            state.endTime = endTime;
            // handleChangeSearchQuery();
        };
        const handleKeliChange = (val) => {
            state.granularity = val;
            // handleChangeSearchQuery();
        };
        const getRangeDate = () => {
            if (state.tongjiType !== '4') {
                if (state.tongjiType === '3') {
                    state.startTime = moment(state.selectYear.toString()).startOf('year').format('YYYY-MM-DD HH:mm:ss');
                    state.endTime = moment(state.selectYear.toString()).endOf('year').format('YYYY-MM-DD HH:mm:ss');
                } else {
                    const val = state.selectMonthOrQuarter;
                    if (state.tongjiType === '1') {
                        state.startTime = moment(state.selectYear.toString())
                            .month(val - 1)
                            .startOf('month')
                            .format('YYYY-MM-DD HH:mm:ss');
                        state.endTime = moment(state.selectYear.toString())
                            .month(val - 1)
                            .endOf('month')
                            .format('YYYY-MM-DD HH:mm:ss');
                    } else {
                        state.startTime = moment(state.selectYear.toString()).quarter(val).startOf('quarter').format('YYYY-MM-DD HH:mm:ss');
                        state.endTime = moment(state.selectYear.toString()).quarter(val).endOf('quarter').format('YYYY-MM-DD HH:mm:ss');
                    }
                }
            }
            // handleChangeSearchQuery();
        };

        const handleChangeSearchQuery = () => {
            emit('change', {
                granularity: state.granularity,
                startTime: state.startTime,
                endTime: state.endTime,
                deliveryMode: state.deliveryMode,
                isRequireAnalyse: state.isRequireAnalyse
            });
        };
        getRangeDate();
        handleChangeSearchQuery();
        return {
            ...toRefs(state),
            keliduOptions,
            timeOptions,
            handleSelectTongjiTypeChange,
            handleSelectYearChange,
            rangeDateChange,
            handleTimeChange,
            handleKeliChange,
            handleChangeSearchQuery
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>
